<template>
	<view class="content">
		<view class="selectBox">
			<view class="typeBox">
				<view class="typeItem" :class="typeIndex==0?'typeItemActive':''" @click="changeType(0)">
					堂食
				</view>
				<view class="typeItem" :class="typeIndex==1?'typeItemActive':''" @click="changeType(1)">
					配送
				</view>
			</view>
			<view class="nowBox" v-if="typeIndex==0">
				<image :src="baseUrl+'img/juanjiahui/time.png'" class="timeIcon"></image>
				<text class="title">立即就餐</text>
			</view>
			<block v-else>
				<view class="addressInfo">
					<!-- 未认证 -->
					<view v-if="user.is_owner==0"
						@click="$navto.navto('/pages/owner_certification/owner_certification')">
						<view class="topBox">
							<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
							<text class="name">暂无地址</text>
						</view>
						<text class="addressText">立即认证成为业主，添加房屋信息</text>
						<text class="arrow">></text>
					</view>
					<view v-else>
						<view class="topBox">
							<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
							<text class="name">{{user.name}}</text>
							<text class="phone">{{user.phone}}</text>
						</view>
						<text class="addressText">{{user.floor_house_num}}</text>
						<text class="arrow">></text>
					</view>
				</view>
				<view class="orderTimeBox">
					<view class="titleBox">
						<image :src="baseUrl+'img/juanjiahui/time.png'" class="timeIcon"></image>
						<text class="title">配送时间</text>
						<view class="notBlock">
						</view>
						<text class="notLabel">不可预约</text>
						<view class="canBox">
							<view class="canBlock">
							</view>
							<text class="canLabel">已选择</text>
						</view>
					</view>
					<view class="dateBox">
						<text class="month">{{monthValue}}</text>
						<view class="triangle">
						</view>
						<view class="line">
						</view>
						<scroll-view class="dateScrollBox" scroll-x="true" :scroll-into-view="dateId">
							<view class="dateItem" :class="dateIndex==index?'dateActive':''" :id="`item-${index}`"
								v-for="(item,index) in dateArr" :key="index" @click="selDate(index)">
								{{item}}
							</view>
						</scroll-view>
						<uni-section class="selecteMonth">
							<uni-data-select v-mode="monthValue" :localdata="month" @change="changeMonth()" />
							</uni-data-select>
						</uni-section>
					</view>
					<view class="timeBox">
						<scroll-view class="timeScrollBox" scroll-x="true" :scroll-into-view="timeId">
							<view class="timeItem"
								:class="{'tiemActive': timeIndex === index,'timeDisable': !item.status}"
								:id="`item-${index}`" v-for="(item,index) in timeArr" :key="index"
								@click="selTime(index,item.status)">
								{{item.time_frame}}
							</view>
						</scroll-view>
					</view>
				</view>
			</block>
		</view>
		<view class="selectedBox" v-for="(item,index) in newDishes" :key="index" v-if="item.length>0">
			<view class="selectedTitleBox">
				<text class="selectedType">{{item[0].cat_name}}</text>
				<text class="selectedNum">(共{{totalItemCount(item)}}件)</text>
			</view>
			<view class="cartItem" v-for="(item1,index1) in item" :key="index1">
				<image :src="item1.cover" class="cartPoster"></image>
				<text class="cartName">{{item1.name}}</text>
				<view class="cartPriceBox">
					<text class="sellPrice">￥{{item1.price}}</text>
					<text class="linePrice">￥{{item1.old_price}}</text>
				</view>
				<text class="countNum">X{{item1.num}}</text>
			</view>
		</view>
		<view class="orderInfoBox">
			<view class="item">
				<text class="left">点餐数量</text>
				<text class="right">{{info.cartTotal.dishes_num}}</text>
			</view>
			<!-- <view class="item">
				<text class="left">就餐人数</text>
				<view class="right">
					<input type="text" placeholder="请输入" style="margin-right: 20rpx;" v-model="num" />
					<text class="left">人</text>
				</view>
			</view> -->
			<view class="item" style="flex-direction: column;">
				<text class="left">备注：</text>
				<textarea v-model="notes" placeholder="留言您的特殊要求" class="note" />
			</view>
		</view>
		<view class="orderInfoBox">
			<!-- 配送就有服务费 -->
			<view class="item" v-if="typeIndex==1">
				<view class="left">服务费<text style="font-weight: 500;font-size: 20rpx;color: #121212;">（餐酒费15%）</text>
				</view>
				<text class="right">￥{{fee}}</text>
			</view>
			<view class="item">
				<text class="left">餐酒费</text>
				<text class="right" style="font-size: 34rpx;font-weight: 700;">￥{{info.cartTotal.dishes_price}}</text>
			</view>
		</view>
		<view class="totalBox">
			<text class="totalBoxLeft">合计：</text>
			<text class="totalBoxRight">￥{{money}}</text>
		</view>
		<view class="cartBox">
			<text class="totalLabel">合计：</text>
			<text class="totalPrice">￥{{money}}</text>
			<view class="submit" @click="submit">
				提交订单
			</view>
		</view>
	</view>
</template>
<script>
	import {
		add,
		subtract,
		multiply,
		divide
	} from '@/common/mathUtils.js';
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				typeIndex: 0,
				month: [],
				monthValue: '',
				value: 0,
				id: '',
				cat_id: '',
				data: '',
				timeArr: [], //可预约时段
				timeIndex: -1,
				time: '',
				service_data: '',
				dateArr: [],
				dateIndex: -1,
				date: '',
				yearArr: [],
				nextMonth: 0,
				dateId: '',
				timeId: '',
				info: '',
				user: '',
				fee: '', //服务费
				money: '', //总费用
				num: '', //人数
				notes: '',
				newDishes: ''
			}
		},
		onLoad() {
			this.info = this.$store.state.tempData;
			this.newDishes = this.categorize(this.info.cartTotal.dishes);
			this.money = this.info.cartTotal.dishes_price;
			this.fee = multiply(this.money, 0.15);
			this.$store.commit('clearTempData');
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
			this.dateArr = this.$getDateRanges().currentMonthDates //赋值当前月份剩余日期
			this.yearArr[0] = this.$getCurrentAndNextMonthYear().currentMonthYear;
			this.yearArr[1] = this.$getCurrentAndNextMonthYear().nextMonthYear;
			this.month = this.$getFormattedMonths();
			this.monthValue = this.month[0].text;
			this.service_data = this.yearArr[0] + '-' + this.dateArr[0].toString()
				.padStart(2, '0');
			this.getTime()
		},
		methods: {
			totalItemCount(item) {
				let sum = 0;
				for (let i = 0; i < item.length; i++) {
					sum += item[i].num;
				}
				return sum;
			},
			submit() {
				if (this.user.is_owner == 0) {
					return this.$toast("请先认证成为业主");
				}
				if (this.typeIndex == 1) { //配送
					if (!this.date) {
						return this.$toast("请选择预定日期");
					}
					if (!this.time) {
						return this.$toast("请选择预定时间");
					}
				}
				// if (!this.num) {
				// 	return this.$toast("请输入就餐人数");
				// }
				this.$request.post('subscribe_save', {
					type: 1,
					is_eat: this.typeIndex + 1, //是否堂食
					address: this.user.floor_house_num,
					sub_data: this.service_data,
					sub_time:this.time,
					people_num:1,
					remark:this.notes,
					floor_house_num:this.user.floor_house_num
				}).then(res => {
					if (res.data.code != 10000) {
						return this.$toast(res.data.message);
					}
					//付款
					this.$request.post(`unified_order`, {
						id: res.data.data.id,
						type: 2,
						pay_status:1
					}).then(res => {
						console.log(res);
						if (res.data.code == 10000) {
							wx.requestPayment({
								timeStamp: res.data.data.timeStamp.toString(),
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								success: (res) => {
									this.$navto.navto("/pages/juanjiahui_result/juanjiahui_result")
								},
								fail: (res) => {
									this.$toast('支付失败');
								}
							});
						}
					})
				})
			},
			changeType(num) {
				this.typeIndex = num;
				if (num == 0) {
					this.money = this.info.cartTotal.dishes_price;
				} else {
					this.money = add(this.money, this.fee);
				}
			},
			getTime() {
				this.$request.post(`sub_time_list`, {
					type: 1,
					service_data: this.service_data,
					sub_type: 1
				}).then(res => {
					this.timeArr = res.data.data;
				})
			},
			// 选择时间
			selTime(index, status) {
				if (!status) {
					return this.$toast("当前时间不可选");
				}
				this.timeIndex = index;
				this.time = this.timeArr[index].time_frame;

			},
			// 选择日期
			selDate(index, status) {
				this.dateIndex = index;
				this.date = this.dateArr[index];
				this.dateArr = this.$getDateRanges().currentMonthDates;
				if (this.nextMonth == 0) {
					this.service_data = this.yearArr[0] + '-' + this.date.toString().padStart(2, '0');
				} else {
					this.service_data = this.yearArr[1] + '-' + this.date.toString().padStart(2, '0');
				}
				this.getTime();
			},
			// 选择月份
			changeMonth(e) {
				this.timeIndex = -1;
				this.dateIndex = -1;
				if (e == 0) { //当前月份
					this.nextMonth = 0;
					console.log(this.$getCurrentAndNextMonthYear().currentMonthYear);
					this.dateArr = this.$getDateRanges().currentMonthDates;
					this.service_data = this.yearArr[0] + '-' + this.dateArr[0].toString().padStart(2, '0');
				} else { //下个月
					this.nextMonth = 1;
					console.log(this.$getCurrentAndNextMonthYear().nextMonthYear);
					this.dateArr = this.$getDateRanges().nextMonthDates;
					this.service_data = this.yearArr[1] + '-' + this.dateArr[0].toString().padStart(2, '0');
				}
				console.log(this.nextMonth)
				this.monthValue = this.month[e].text;
				this.getTime();
				this.dateId = 'item-0';
				this.timeId = 'item-0';
				setTimeout(() => {
					this.dateId = '';
					this.timeId = '';
				}, 1000)
			},
			categorize(dishes) { //给购物车分类
				// 定义分类顺序
				const categoryOrder = ["餐食", "咖啡吧", "鸡尾酒", "下午茶"];
				// 初始化二维数组
				const result = Array.from({
					length: categoryOrder.length
				}, () => []);
				// 遍历 dishes 数组并分类
				dishes.forEach((dish) => {
					const index = categoryOrder.indexOf(dish.cat_name); // 获取分类索引
					if (index !== -1) {
						result[index].push(dish); // 将菜品添加到对应的分类中
					}
				});
				return result;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cartBox {
		position: fixed;
		z-index: 3;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		padding-right: 40rpx;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-top: 1rpx solid #f0f0f0;

		.totalPrice {
			color: #121212;
			font-weight: 700;
			font-size: 34rpx;
			letter-spacing: 2rpx;
		}

		.totalLabel {
			font-weight: 700;
			font-size: 20rpx;
			color: #121212;
		}

		.submit {
			width: 420rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: #121212;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 28rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
			margin-left: auto;
		}
	}

	.totalBox {
		padding: 40rpx 40rpx 45rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;
		margin-bottom: 200rpx;
		display: flex;
		justify-content: space-between;

		.totalBoxLeft {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
		}

		.totalBoxRight {
			color: #121212;
			font-weight: 700;
			font-size: 34rpx;
		}
	}

	.orderInfoBox {
		padding: 0rpx 40rpx 0rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;

		.item {
			position: relative;
			padding-top: 45rpx;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;

			.note {
				width: 100%;
				height: 200rpx;
				margin-top: 20rpx;
			}

			.right {
				font-weight: 500;
				font-size: 26rpx;
				color: #121212;
				display: flex;
				margin-left: auto;
				text-align: right;
				align-items: center;
			}

			.left {
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
			}
		}

		.item:last-child {
			border: none;
		}
	}

	.selectedBox {
		padding: 40rpx 40rpx 45rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;



		.cartItem {
			position: relative;
			width: 670rpx;
			height: 140rpx;
			margin-top: 45rpx;

			.countNum {
				display: flex;
				align-items: center;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 30rpx;
				width: 60rpx;
				text-align: center;
				font-size: 30rpx;
			}

			.cartPriceBox {
				position: absolute;
				top: 85rpx;
				left: 240rpx;
				display: flex;
				align-items: center;

				.linePrice {
					color: #8e8e8e;
					font-weight: 500;
					font-size: 18rpx;
					margin-left: 20rpx;
					text-decoration: line-through;
				}

				.sellPrice {
					color: #121212;
					font-weight: 700;
					font-size: 22rpx;
				}
			}

			.cartName {
				position: absolute;
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
				top: 20rpx;
				left: 240rpx;
			}

			.cartPoster {
				width: 200rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}

		.selectedTitleBox {
			display: flex;
			align-items: center;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;

			.selectedType {
				color: #121212;
				font-weight: 700;
				font-size: 30rpx;
			}

			.selectedNum {
				color: #121212;
				font-weight: 700;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
	}

	.selectBox {
		padding: 40rpx 40rpx 65rpx 40rpx;
		box-sizing: border-box;
		background-color: #fff;

		.nowBox {
			display: flex;
			align-items: center;
			padding-top: 58rpx;

			.timeIcon {
				width: 28rpx;
				height: 28rpx;
			}

			.title {
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
				margin-left: 25rpx;
			}
		}

		.orderTimeBox {
			// width: 750rpx;
			// background: #ffffff;
			// padding: 60rpx 40rpx 75rpx 40rpx;
			// border-top: 25rpx solid #f0f0f0;
			// border-bottom: 25rpx solid #f0f0f0;
			margin-top: 55rpx;

			.timeBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-top: 58rpx;

				.timeScrollBox {
					// width: 450rpx;
					overflow-x: scroll;
					display: flex;
					white-space: nowrap;

					.timeItem {
						// height: 50rpx;
						font-weight: 500;
						font-size: 26rpx;
						color: #121212;
						margin-right: 75rpx;
						flex: 0 0 auto;
						display: inline-flex;
					}

					.tiemActive {
						color: #FF6E5D;
						font-weight: 900;
						// border-bottom: 4rpx solid #FF6E5D;
					}

					.timeDisable {
						color: #8E8E8E;
					}
				}
			}

			.dateBox {
				position: relative;
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-top: 58rpx;
				padding-bottom: 58rpx;
				border-bottom: 1rpx solid #121212;

				.selecteMonth {
					position: absolute;
					left: 0rpx;
					width: 120rpx;
					height: 50%;
				}

				.dateScrollBox {
					// width: 450rpx;
					margin-left: 54rpx;
					display: flex;
					white-space: nowrap;
					overflow-x: scroll;

					.dateItem {
						width: 80rpx;
						height: 80rpx;
						border: 1rpx solid #121212;
						border-radius: 50%;
						// display: flex;
						display: inline-flex;
						font-weight: 500;
						font-size: 26rpx;
						color: #121212;
						align-items: center;
						justify-content: center;
						margin-right: 33rpx;
						flex: 0 0 auto;
						box-sizing: border-box;
					}

					.dateActive {
						background: #FF6E5D;
						// border: none;
						color: #ffffff;
						border: 1rpx solid #FF6E5D;
					}

					.dateDisable {
						background: #f0f0f0;
						border: none;
					}
				}

				.line {
					width: 1rpx;
					height: 44rpx;
					background: #c7c7c7;
					margin-left: 50rpx;
				}

				.triangle {
					width: 24rpx;
					height: 18rpx;
					background: #121212;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}

				.month {
					width: 150rpx;
					text-align: center;
					font-weight: 700;
					font-size: 30rpx;
					color: #121212;
					white-space: nowrap;
				}
			}

			.titleBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				padding-bottom: 53rpx;
				border-bottom: 1rpx solid #121212;

				.timeIcon {
					width: 28rpx;
					height: 28rpx;
				}

				.title {
					font-weight: 700;
					font-size: 26rpx;
					color: #121212;
					margin-left: 25rpx;
				}

				.notBlock {
					width: 17rpx;
					height: 17rpx;
					background: #f0f0f0;
					margin-left: 265rpx;
				}

				.notLabel {
					font-weight: 500;
					font-size: 20rpx;
					color: #8E8E8E;
					margin-left: 14rpx;
				}

				.canBox {
					display: flex;
					align-items: center;
					margin-left: auto;

					.canBlock {
						width: 17rpx;
						height: 17rpx;
						background: #FF6E5D;
					}

					.canLabel {
						font-weight: 500;
						font-size: 20rpx;
						color: #121212;
						margin-left: 14rpx;
					}
				}

			}
		}

		::v-deep .uni-select {
			border: none;
		}

		::v-deep .uni-select__input-box {
			opacity: 0 !important;
		}

		.addressInfo {
			width: 100%;
			margin-top: 20rpx;
			background-color: #fff;
			overflow: hidden;
			padding-top: 50rpx;
			padding-bottom: 50rpx;
			position: relative;
			border-bottom: 1rpx solid #121212;

			.arrow {
				position: absolute;
				font-size: 24rpx;
				right: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #8E8E8E;
			}

			.topBox {
				// margin-left: 40rpx;
				display: flex;
				align-items: center;

				.addressIcon {
					width: 22rpx;
					height: 28rpx;
				}

				.name {
					margin-left: 40rpx;
					color: #121212;
					font-size: 28rpx;
				}

				.phone {
					margin-left: 40rpx;
					color: #121212;
					font-size: 28rpx;
				}
			}

			.addressText {
				margin-top: 30rpx;
				margin-left: 60rpx;
				font-size: 24rpx;
				color: #8E8E8E;
				display: inline-block;
			}

		}

		.typeBox {
			width: 670rpx;
			height: 90rpx;
			display: flex;

			.typeItem {
				width: 50%;
				height: 100%;
				font-weight: 500;
				font-size: 28rpx;
				background: #dfdfdf;
				color: #121212;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.typeItemActive {
				background: #121212;
				color: #FFFFFF;
			}
		}
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
		padding-bottom: 100rpx;
	}
</style>